<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>仪表盘 Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://kit.fontawesome.com/a2e0e6cfd3.js" crossorigin="anonymous"></script>
  <style>
    body {
      background-color: #f8f9fa;
    }
    .iphone-frame {
      width: 430px;
      height: 932px;
      border-radius: 40px;
      border: 1px solid #ccc;
      overflow: hidden;
      margin: 1rem auto;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div class="iphone-frame bg-white">
    <!-- 顶部状态栏（仿微信） -->
    <div class="flex justify-between items-center text-xs px-4 py-1 text-gray-500 bg-gray-100">
      <div>9:41 AM</div>
      <div class="flex gap-1 items-center">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>

    <!-- 顶部导航栏 -->
    <div class="flex items-center justify-between px-4 py-2 border-b">
      <h1 class="text-lg font-bold">实验室能耗仪表盘</h1>
      <button class="text-sm text-blue-500">设置</button>
    </div>

    <!-- 实验室选择 -->
    <div class="px-4 mt-2">
      <label class="block text-sm font-medium text-gray-700 mb-1">选择实验室</label>
      <select class="w-full border rounded px-3 py-2 text-sm">
        <option value="lab_1">实验室 A</option>
        <option value="lab_2">实验室 B</option>
      </select>
    </div>

    <!-- 指标卡片 -->
    <div class="grid grid-cols-2 gap-4 px-4 mt-4">
      <div class="bg-blue-100 rounded p-3">
        <div class="text-sm text-gray-600">今日能耗</div>
        <div class="text-xl font-bold text-blue-700">2350 kWh</div>
        <div class="text-xs text-gray-500 mt-1">较昨日 ↑ 5%</div>
      </div>
      <div class="bg-green-100 rounded p-3">
        <div class="text-sm text-gray-600">送风风量</div>
        <div class="text-xl font-bold text-green-700">12000 m³</div>
        <div class="text-xs text-gray-500 mt-1">正常</div>
      </div>
      <div class="bg-yellow-100 rounded p-3">
        <div class="text-sm text-gray-600">排风风量</div>
        <div class="text-xl font-bold text-yellow-700">11800 m³</div>
        <div class="text-xs text-gray-500 mt-1">正常</div>
      </div>
      <div class="bg-red-100 rounded p-3">
        <div class="text-sm text-gray-600">异常告警</div>
        <div class="text-xl font-bold text-red-700">2 条</div>
        <div class="text-xs text-gray-500 mt-1">需立即处理</div>
      </div>
    </div>

    <!-- 图表区（占位图） -->
    <div class="mt-4 px-4">
      <div class="text-sm font-semibold mb-1">能耗趋势图</div>
      <img src="https://source.unsplash.com/430x150/?line-chart,data" alt="chart" class="rounded-md">
    </div>

    <div class="mt-4 px-4">
      <div class="text-sm font-semibold mb-1">风量对比图</div>
      <img src="https://source.unsplash.com/430x150/?bar-chart,air" alt="chart" class="rounded-md">
    </div>

    <div class="mt-4 px-4 mb-20">
      <div class="text-sm font-semibold mb-1">环境指标图</div>
      <img src="https://source.unsplash.com/430x150/?temperature,humidity" alt="chart" class="rounded-md">
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 w-full max-w-sm mx-auto bg-white border-t flex justify-around py-2">
      <div class="flex flex-col items-center text-blue-600">
        <i class="fas fa-home text-lg"></i>
        <span class="text-xs">首页</span>
      </div>
      <div class="flex flex-col items-center text-gray-500">
        <i class="fas fa-bolt text-lg"></i>
        <span class="text-xs">预测</span>
      </div>
      <div class="flex flex-col items-center text-gray-500">
        <i class="fas fa-cogs text-lg"></i>
        <span class="text-xs">设备</span>
      </div>
      <div class="flex flex-col items-center text-gray-500">
        <i class="fas fa-user text-lg"></i>
        <span class="text-xs">我的</span>
      </div>
    </div>
  </div>
</body>
</html>